@import "../../style/val.scss";
@import "../../style/mixins.scss";
.bill-show-bar {
	//padding: 10px;
	text-align: center;
	background-color: #fff;
	.font-date {
		color: #888888;
	}
	.icon-pay-date {
		width: 0.33rem;
		height: 0.35rem;
		margin-right: 0.2rem;
	}
	.title-wrapper {
		display: flex;
		align-items: center;
	}
	.row {
		margin: 10px;
	}
	.lab1 {
		font-size: 0.28rem;
		color: #555;
		position: relative;

		& > .butt {
			left: 70%;
			top: -2px;
			position: absolute;
			display: inline-block;
			color: #fff;
			background-color: #f22a2a;
			border-radius: 5px;
			padding: 2px 10px;
		}
	}
	.lab2 {
		font-size: 0.4rem;
		font-weight: 400;
	}
	.lab3 {
		font-size: 0.25rem;
		color: #555;
	}
	.image > img {
		width: 40px;
		height: 40px;
	}
	.red {
		color: #f22a2a;
	}

	.list-far {
		width: 100%;
		min-height: 1.7rem;
		box-sizing: border-box;

		.top_bar_far {
			position: relative;
			box-sizing: border-box;
			.list-title {
				width: 100%;
				height: 1rem;
				line-height: 1rem;
				font-size: 0.3rem;
				color: #555555;
				font-weight: 600;
				border-bottom: 1px solid #e3e3e3;
				text-align: left;
				padding: 0 0.3rem;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.pay-title {
					color: #030303;
					font-weight: 700;
					&-wrapper {
						display: flex;
						align-items: center;
					}
				}
			}
			.top_bar_tips_red {
				margin-left: 4px;
				display: inline-block;
				height: 0.3rem;
				line-height: 0.3rem;
				padding: 0.03rem 0.08rem;
				background-color: #d8433b;
				color: #ffffff;
				text-align: center;
				font-size: 0.26rem;
				position: relative;
				margin-left: 10px;
				&:before {
					color: #d8433b;
					position: absolute;
					content: "";
					left: -8px;
					top: 0;
					bottom: 0;
					margin: auto;
					@include triangle(left);
				}
			}
			.bg-gold {
				background-color: $color-main-green;
				&:before {
					color: $color-main-green;
				}
			}
			.bg-grey {
				background-color: #cecece;
				&:before {
					color: #cecece;
				}
			}
		}

		.item {
			display: flex;

			align-items: center;
			padding: 0.24rem 0.3rem 0.2rem;
			justify-content: space-between;
			text-align: left;
			border-bottom: 1px solid #e3e3e3;
			.item-month {
				color: #545454;
				font-size: 0.3rem;
				margin-bottom: 0.16rem;
			}
			.item-left {
				.item-money {
					color: $color-main-green;
					font-size: 0.6rem;
					height: 0.84rem;
					line-height: 0.84rem;
				}
			}
			.item-right {
				.item-money {
					color: $color-main-green;
					font-size: 0.6rem;
					height: 0.84rem;
					line-height: 0.84rem;
				}
			}
		}
	}
	.item-ll {
		width: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 0.12rem 0;
		box-sizing: border-box;
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 0.3rem;
			color: #555;
			height: 0.72rem;
			padding: 0 0.3rem;
			.item-left {
				flex: 1;
				text-align: left;
			}
			.item-right {
				flex: 1;
				text-align: right;
				color: #999;
			}
		}
	}
}
